<template>
  <!-- 这里有多个根标签 是 Fragments 的作用 和 vue2 不兼容
  https://v3.cn.vuejs.org/guide/migration/fragments.html#片段 
  -->
  <router-view />
  <div class="about">
    <h1>This is an about page</h1>
  </div>

  <!-- Composition api -->
  <Composition></Composition>

  <!-- Teleport: ModalButton -->
  <modal-button></modal-button>

  <!-- Emits 选项 -->
  <!-- <Emits @click="onClick" @blur="onBlur" @focus="onFocus"></Emits> -->
  <Emits @my-click="onClick" @my-blur="onBlur" @my-focus="onFocus"></Emits>

  <!-- 使用App实例方法创建的组件 -->
  <br />
  <comp1></comp1>
  <comp2></comp2>

  <!-- v-model 的使用 -->
  <!-- 单个值可以有一个不具体指认名字 -->
  <vmodel-test v-model="counter"></vmodel-test>
  <br />
  <!-- 多个值也只有一个可以不指认名字 -->
  <vmodel-test
    v-model:modelValue="counter"
    v-model:name="name"
    v-model:password="password"
  ></vmodel-test>
  <br />

  <!-- 三个属性绑定的本质原理 -->
  <vmodel-test
    :model-value="counter"
    :name="name"
    :password="password"
    @update:modelValue="counter = $event"
    @update:name="name = $event"
    @update:password="password = $event"
  ></vmodel-test>
  <br />
  <RenderTest v-model:counter="counter">
    <!-- 插槽 -->
    <template #default><p>title</p></template>
    <template #content><p>content...</p></template>
  </RenderTest>

  <!-- 函数式组件 -->
  <Functional :level="level">这是一个动态的h元素</Functional>

  <!-- 异步组件 -->
  <AsyncComp></AsyncComp>

  <!-- 
    自定义指令 自定义指令API和组件保持一致
    bind → 【beforeMount】
    inserted → 【mounted】
    【beforeUpdate】: new! 元素自身更新前调用, 和组件生命周期钩子很像
    update → removed! 和updated基本相同，因此被移除之，使用updated代替。
    componentUpdated → 【updated】
    【beforeUnmount】 new! 和组件生命周期钩子相似, 元素将要被移除之前调用。
    unbind  →  【unmounted】
   -->
  <p v-heighlight="'#00c698'">heighlight this text</p>

  <!-- 动画 -->
  <transition-test></transition-test>

  <!--
    $watch
    组件watch选项和实例方法$watch不再支持点分隔符字符串路径
    以.分割的表达式不再被 watch 和 $watch 支持，

    可以使用计算函数作为 watch 支持，
    可以使用计算函数作为 $watch 参数实现。
   -->
  <input v-model="foo.bar" type="text" />
</template>
<script>
import ModalButton from "@/components/ModalButton.vue";
import Composition from "@/components/Composition.vue";
import Emits from "@/components/Emits.vue";
import VmodelTest from "@/components/VmodelTest.vue";
import RenderTest from "@/components/RenderTest.vue";
import Functional from "@/components/Functional.vue";
import { defineAsyncComponent } from "@vue/runtime-core";
import TransitionTest from "@/components/TransitionTest.vue";
export default {
  name: "About",
  components: {
    ModalButton,
    Composition,
    Emits,
    VmodelTest,
    // ### 渲染函数API修改
    // 渲染函数变得更简单好用了，修改主要有以下几点：
    // 不再传入h函数，需要我们手动导入；拍平的props结构。scopedSlots删掉了，统一到slots
    RenderTest,
    Functional,
    AsyncComp: defineAsyncComponent(() => import("@/components/NextPage.vue")),
    TransitionTest,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      counter: 1,
      name: "shanliangdeYWJ",
      password: "123456",
      level: 1,
      foo: {
        bar: 1,
      },
    };
  },
  mounted() {
    this.$watch(
      () => this.foo.bar,
      (val, newVal) => {
        console.log(this.foo.bar);
      }
    );
  },
  methods: {
    onClick() {
      console.log("click me!");
    },
    onFocus() {
      console.log("focus me!");
    },
    onBlur() {
      console.log("blur me!");
    },
  },
};
</script>
